<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: Wangtao
 * @LastEditTime: 2020-12-02 20:04:34
-->
<template>
  <continer>
    <template slot="content">
      <el-form
        class="m7-form"
        :label-position="labelPosition"
        :rules="rules"
        :model="formData"
        size="mini"
        ref="nodeForm"
      >
        <el-form-item label="节点名称" prop="name">
          <el-input v-model="formData.name" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="放音类型" prop="playType">
          <el-select v-model="formData.playType" placeholder="请选择放音类型">
            <el-option label="语音库" value="voiceLibrary"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="语音文件" prop="voice">
          <div style="display: flex">
            <m7Select
              size="mini"
              v-model="formData.voice"
              :placeholder="'请选择语音文件'"
              filterable
              :multiple="false"
              :collapse-tags="false"
              :options="voiceLibraryList"
              :remote="true"
              :defaultProps="{ label: 'name', value: '_id' }"
            >
            </m7Select>
            <AudioProgress
              class="audioProgress"
              ref="audioProgressRef"
              :row="currentVoice"
              :showDowload="false"
              :showListen="true"
              type="common"
              :url="currentVoice.fileUrl"
              v-if="currentVoice.fileUrl"
            ></AudioProgress>
          </div>
        </el-form-item>
        <el-form-item label="重播次数" prop="replayTimes">
          <el-input v-model="formData.replayTimes" type="number" size="mini">
            <template slot="append">次</template>
          </el-input>
        </el-form-item>
        <el-form-item label="重播间隔" prop="replayInterval">
          <el-input v-model="formData.replayInterval" type="number" size="mini">
            <template slot="append">秒</template>
          </el-input>
        </el-form-item>
        <el-form-item
          :label="item.label"
          prop="region"
          v-for="(item, index) in condition"
          :key="index"
        >
          <el-select
            v-model="item.to"
            placeholder="请选择下一步节点"
            style="width: 100%"
            filterable
          >
            <el-option
              v-for="(node, index) in nodeList"
              :label="node.data.name"
              :value="node.id"
              :key="index"
              v-show="!node.viewOnly && node.id !== currentData.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template slot="oprate">
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
    <template slot="remove">
      <el-button @click="deleteNode" type='danger' size="mini">删除</el-button>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import continer from '@/components/configCommon/ui-modules/drawer-container.vue'
import nodeEidtMixins from './nodeEidtMixins'
import remoteSelect from '@/components/configCommon/operate-modules/remoteSearch/index.vue'
@Component({
  name: 'ivr-node-play',
  components: { continer, remoteSelect }
})
export default class extends Mixins(nodeEidtMixins) {
  private remoteUrl = '/call/action/ivr/voiceLibrary/query'
}
</script>

<style lang="stylus" scoped>
  .audioProgress
    margin 0 10px 0
</style>
